<template>
  <div>
    <SelectDateSearchVue @success="getTime"></SelectDateSearchVue>
    <div class="unit" v-for="(data, index) in list" :key="index">
      <div class="header">
        <img class="avator" :src="data.fromAvatar" alt="" />
        <div class="name">
          <span class="name-nowarp" v-if="data.chatType == 1">
            {{ data.fromName }}
            <img class="sex" v-if="data.fromGender == 0" src="@/assets/man.png" />
            <img class="sex" v-else-if="data.fromGender == 1" src="@/assets/woman.png" />
          </span>
          <span class="name-nowarp" v-else>
            {{ data.roomName }}
          </span>
          <div style="font-size: 14px; font-weight: 500;" :class="{ color1: true, color2: false }">@微信</div>
        </div>
        <div class="state">
          <div>
            <span
              class="state-value"
              :class="{ 'state-type1': data.replyStatus == 1, 'state-type1': data.replyStatus == 2 }"
            >
              {{ data.replyStatus == 1 ? '未回复' : '已回复' }}
            </span>
          </div>
          <div class="date">
            {{ data.replyTime }}
          </div>
        </div>
      </div>
      <van-divider :style="{ color: '#E5E6EB;', borderColor: '#E5E6EB', padding: '16px 0', margin: '0' }">
      </van-divider>
      <div class="alert-time">
        <div class="date">{{ data.createTime }}</div>
        <div class="alert-con">超时约{{ data.timeMinutes }}分钟</div>
      </div>
      <div style="margin: 16px 0;">
        <ShowChatVue :unit="data"></ShowChatVue>
      </div>
      <div class="buttom">
        <div class="chat" @click="gotoFn(data)">进入会话</div>
        <div class="chated" v-if="data.replyStatus == 1" @click="setStateFn(data.id)">我已回复</div>
      </div>
    </div>
  </div>
</template>
<script>
  import SelectDateSearchVue from '../../components/SelectDateSearch.vue'
  import ShowChatVue from './ShowChat.vue'
  import { getNoticeList } from '@/api/quality.js'
  export default {
    name: 'quality-record-list',
    components: {
      SelectDateSearchVue,
      ShowChatVue
    },
    data() {
      return {
        list: [],
        query: {
          type: 1,
          pageNum: 1,
          pageSize: 10000,
          beginTime: '',
          endTime: '',
          userIds: sessionStorage.userId
        }
      }
    },
    methods: {
      getTime(data) {
        this.query.beginTime = data.beginTime
        this.query.endTime = data.endTime
        this.getDataList()
      },
      getDataList() {
        getNoticeList(this.query).then((res) => {
          this.list = res.rows
        })
      },
      gotoFn(data) {
        if (data.chatType == 1) {
          wx.openEnterpriseChat({
            // 注意：userIds和externalUserIds至少选填一个。内部群最多2000人；外部群最多500人；如果有微信联系人，最多40人
            userIds: sessionStorage.userId, //参与会话的企业成员列表，格式为userid1;userid2;...，用分号隔开。
            externalUserIds: data.fromId, // 参与会话的外部联系人列表，格式为userId1;userId2;…，用分号隔开。
            groupName: '', // 会话名称。单聊时该参数传入空字符串""即可。
            chatId: '', // 若要打开已有会话，需指定此参数。如果是新建会话，chatId必须为空串
            success: (res) => {
              // 回调
            },
            fail: (res) => {
              if (res.errMsg.indexOf('function not exist') > -1) {
                alert('版本过低请升级')
              } else {
              }
            }
          })
        } else {
          wx.openEnterpriseChat({
            // 注意：userIds和externalUserIds至少选填一个。内部群最多2000人；外部群最多500人；如果有微信联系人，最多40人
            userIds: sessionStorage.userId, //参与会话的企业成员列表，格式为userid1;userid2;...，用分号隔开。
            externalUserIds: '', // 参与会话的外部联系人列表，格式为userId1;userId2;…，用分号隔开。
            groupName: '', // 会话名称。单聊时该参数传入空字符串""即可。
            chatId: data.roomId, // 若要打开已有会话，需指定此参数。如果是新建会话，chatId必须为空串
            success: (res) => {
              // 回调
            },
            fail: (res) => {
              if (res.errMsg.indexOf('function not exist') > -1) {
                alert('版本过低请升级')
              } else {
              }
            }
          })
        }
      }
    },
    created() {}
  }
</script>

<style lang="less" scoped>
  .unit {
    margin-top: 16px;
    background: #fff;
    padding: 16px;
    .header {
      display: flex;
      justify-content: space-between;
      justify-items: center;
      .avator {
        flex-shrink: 0;
        margin-right: 16px;
        width: 58px;
        height: 58px;
        border-radius: 8px 8px 8px 8px;
      }
      .name {
        flex: 1;
        width: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 4px 0;
        font-size: 16px;
        font-weight: 600;
        color: #1d2129;
        .name-nowarp {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .sex {
          margin-left: 4px;
          width: 16px;
          height: 16px;
        }
        .color1 {
          color: #f6a723;
        }
        .color2 {
          color: #1869ff;
        }
      }
      .state {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 4px;
        text-align: right;
        .state-value {
          flex-grow: 0;
          height: 24px;
          border-radius: 16px;
          font-size: 12px;
          padding: 4px 8px;
        }
        .state-type1 {
          border: 1px solid #f53f3f;
          background: #fdebeb;
          color: #f53f3f;
        }
        .state-type2 {
          border: 1px solid #07c160;
          background: #e6f8ef;
          color: #07c160;
        }
      }
    }
    .date {
      font-size: 14px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #4e5969;
    }
    .alert-time {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .alert-con {
        font-size: 14px;
        font-weight: 400;
        color: #f53f3f;
      }
    }
    .buttom {
      display: flex;
      margin-top: 16px;
      padding: 0 12px;
      .chat {
        flex: 1;
        text-align: center;
        height: 44px;
        line-height: 44px;
        background: linear-gradient(90deg, #07c160 0%, #90de45 99%);
        border-radius: 16px;
        font-size: 18px;
        font-weight: 600;
        color: #ffffff;
      }
      .chated {
        margin-left: 16px;
        flex: 1;
        text-align: center;
        height: 44px;
        line-height: 44px;
        font-size: 18px;
        font-weight: 600;
        border: 1px solid #07c160;
        border-radius: 16px;
        color: #07c160;
      }
    }
  }
</style>
